<template>
  <div class="menu-wrap" :style="{'marginLeft': shrink ? 0 : '-130px'}">
    <div class="menu-box" :style="{'opacity': shrink ? 1 : 0}">
      <ul>
        <li v-for="(item,idx) in menuList"
            :key="idx"
            :class="{on: curMenuIdx == idx}"
            @click="menuHandle(item,idx)">
          {{ item.name }}
        </li>
      </ul>
      <div class="refresh" @click="refreshHandle">
        <img src="@/assets/images/img-icon32.svg" />刷新
      </div>
    </div>
    <div v-if="shrink" class="shrink-btn" @click="shrink = !shrink"></div>
    <div v-else class="shrink-btn2" @click="shrink = !shrink"></div>
  </div>

</template>

<script>
import {mapGetters} from "vuex";

export default {
  name: "index",
  components: {},
  computed: {
    ...mapGetters(['currentMenu']),
  },
  data() {
    return {
      curMenu: {},
      curMenuIdx: 0,
      menuList: [
        {
          name: '全览', value: 'ql', path: '/'
        }, {
          name: '一区', value: 'yq', path: '/areaLamp'
        }, {
          name: '二区', value: 'eq', path: '/areaLamp'
        }, {
          name: '散货码头', value: 'szmt', path: '/areaLamp'
        }],
      shrink: true,

    }
  },
  created() {
    this.curMenuIdx = this.currentMenu == -1 ? 0 : this.currentMenu;
  },
  methods: {
    menuHandle(item, i) {
      this.curMenu = item;
      this.curMenuIdx = i;

      this.$router.push(item.path);
      this.$store.commit('SET_CURRENTMENU', i)
    },
    refreshHandle(){
      this.$store.commit('SET_REFRESHFLAG', true)
    }
  }
}
</script>

<style scoped lang="scss">
.menu-wrap {
  width: 180px;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  transition: .3s all linear;

  .menu-box {
    width: 150px;
    height: calc(100% - 20px);
    background: url("@/assets/images/img-menu.png") no-repeat left top;
    background-size: 100% 100%;
    flex-shrink: 0;
    transition: .3s all linear;

    .refresh{
      font-size: 18px;
      font-weight: 400;
      color: #fff;
      background: #499CDB;
      padding: 8px 15px;
      border-radius: 4px;
      display: inline-block;
      position: absolute;
      bottom: 100px;
      left: 30px;
      z-index: 9;
      user-select: none;
      cursor: pointer;

      img{
        width: 20px;
        margin-right: 6px;
        vertical-align: sub;
      }
    }

    ul {
      position: relative;
      z-index: 6;
      margin-top: 70px;

      li {
        height: 60px;
        line-height: 60px;
        color: #fff;
        font-size: 22px;
        font-weight: 400;
        text-align: center;
        cursor: pointer;

        &:hover, &.on {
          color: #fff;
          background: linear-gradient(to right, #5484CC, #172455);
        }
      }
    }

    .menu-btn {
      color: #fff;
      position: absolute;
      bottom: 50px;
    }
  }

  .shrink-btn, .shrink-btn2 {
    width: 44px;
    height: 150px;
    position: relative;
    z-index: 10;
    cursor: pointer;
  }

  .shrink-btn {
    background: url("@/assets/images/img-show2.svg") no-repeat left top;
    background-size: 100% 100%;
  }

  .shrink-btn2 {
    background: url("@/assets/images/img-show.svg") no-repeat left top;
    background-size: 100% 100%;
  }
}

</style>
